<template>

  <!--背景图片-->
  <img class="bgimg" :src="musicList.al.picUrl">
  <!--头部-->
  <div style="display: flex;justify-content: space-between;color: #fff">
    <div style="display: flex">
      <van-icon size="0.8rem" name="exchange" @click="updateDetailShow"/>
      <div style="display: flex;flex-direction: column;width: 3rem">
        <Vue3Marquee>
          {{ musicList.name }}
        </Vue3Marquee>
        <span v-for="(item,index) in musicList.ar" :key="index">{{ item.name }}</span>
      </div>
    </div>
    <div>
      <van-icon size="0.8rem" name="share-o"/>
    </div>
  </div>
  <!--中间部分-->
  <!--显示转盘时-->
  <div class="middle" v-show="!isShowLyric" @click="isShowLyric = !isShowLyric">
    <img class="img_cizhen" :class="{img_cizhen_active:isPlay}" src="@/assets/cizhen.png">
    <img class="img_cipan" src="@/assets/cipan.png">
    <img class="img_gequ" :class="[isPlay?'img_gequ_active':'img_gequ_paused']" :src="musicList.al.picUrl">
  </div>
  <!--显示歌词块时-->
  <div class="middle-geci" v-show="isShowLyric" @click="isShowLyric = !isShowLyric" ref="musicLyric">
    <p v-for="(item,index) in transformLyric" :key="index"
       :class="{active:(currentTime*1000)>=item.time&&(currentTime*1000)<item.xiayijukaishideshijian}">
      {{ item.lrc }}
    </p>
  </div>
  <!--底部-->
  <div>
    <div style="display: flex;justify-content: space-between;text-align: center;padding: 0 0.6rem;color: #fff">
      <van-icon size="0.7rem" name="upgrade"/>
      <van-icon size="0.7rem" name="points"/>
      <van-icon size="0.7rem" name="hot-o"/>
      <van-icon size="0.7rem" name="medal-o"/>
      <van-icon size="0.7rem" name="good-job-o"/>
    </div>
    <!--进度条-->
    <div style="display:flex;height: 1rem;align-items: center;justify-content: center">
      <van-slider class="range" bar-height="4px" active-color="#ee0a24" v-model="currentTime" :min="0" :max="50"
                  :step="0.01"/>
    </div>
    <div style="display: flex;justify-content: space-between;align-items:center;padding: 0 0.6rem;color: #fff">
      <van-icon size="0.7rem" name="replay"/>
      <van-icon size="0.7rem" name="arrow-left" @click="goPlay(-1)"/>
      <van-icon size="1rem" name="pause-circle-o" v-if="isPlay" @click="playOrPausedMusic"/>
      <van-icon size="1rem" name="play-circle-o" v-else @click="playOrPausedMusic"/>
      <van-icon size="0.7rem" name="arrow" @click="goPlay(1)"/>
      <van-icon size="0.7rem" name="ascending"/>
    </div>
  </div>

</template>

<script>
// 在组件中单独引入第三方跑马灯组件vue3-marquee及样式
import {Vue3Marquee} from "vue3-marquee";
import 'vue3-marquee/dist/style.css'
import {mapState, mapMutations} from "vuex/dist/vuex.mjs";

export default {
  name: "MusicDetail",
  components: {Vue3Marquee},
  props: ['musicList', 'playOrPausedMusic', 'isPlay'],
  data() {
    return {
      // 是否显示歌词区域
      isShowLyric: false
    }
  },
  methods: {
    ...mapMutations('footer', ['updateDetailShow', 'updatePlayMusicIndex']),
    goPlay(num) {
      let index = this.playListIndex + num
      if (index < 0) {
        index = this.playLists.length - 1
      } else if (index == this.playLists.length) {
        index = 0
      }
      this.updatePlayMusicIndex(index)
    }
  },
  computed: {
    ...mapState('footer', ['lyricList', 'currentTime', 'playListIndex', 'playLists']),
    // 转换歌词的格式
    transformLyric() {
      // 声明一个空数组
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split('\n').map(item => {
          // 获取当前对象（即这句歌词）中的 分，秒，毫秒，歌词内容
          let min = item.slice(1, 3)
          let sec = item.slice(4, 6)
          let mill = item.slice(7, 10)
          let lrc = item.slice(11, item.length)
          // 将当前句的歌词开始的时间转换成毫秒
          let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9)
            lrc = item.slice(10, item.length)
            time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          }
          //返回一个对象，每个对象都包括该句歌词的 分，秒，毫秒，歌词, 转换为毫秒后的时间
          return {min, sec, mill, lrc, time}
        })
        // 遍历每一个对象，给每一个对象加一个属性：即xiayijukaishideshijian，写一句歌词开始播放的时间
        // 用以判断歌词进度，改变正在播放的该句歌词的样式
        arr.forEach((item, index) => {
          // 排除最后一句歌词
          if (index == arr.length - 1) {
            item.xiayijukaishideshijian = 0
          } else {
            item.xiayijukaishideshijian = arr[index + 1].time
          }
        })
      }
      // 返回一个数组，数组就是整首歌每句的歌词信息，一句歌词的信息就是该数组中的一个对象
      return arr
    }
  },
  mounted() {
    // console.log(this.lyricList.lyric)
    // console.log(this.transformLyric)
  },
  watch: {
    // 监听歌词播放的时间，用来滚动歌词
    currentTime() {
      // 找到当前激活的这句歌词
      let p = document.querySelector("p.active")
      // console.log([p])
      // 如果没有激活的歌词，结束，有激活的歌词，进行实时滚动
      if (!p) {
        return
      } else if (p.offsetTop > 200) {
        this.$refs.musicLyric.scrollTop = p.offsetTop - 200
      }

      // if (p.offsetTop > 300) {
      //   this.$refs.musicLyric.scrollTop = p.offsetTop - 300
      // }
    }
  }
}
</script>

<style lang="less" scoped>
.bgimg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(0.7rem);
}

.middle {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 0.2rem;
}

.middle-geci {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 0.2rem;
  padding: 0 0.2rem;
  //margin-bottom: 1rem;
  overflow-y: scroll;

  p {
    color: #eee;
    font-size: 0.4rem;
    margin-bottom: 0.3rem;
  }

  .active {
    //color: red;
    font-size: 0.6rem;
  }
}

.img_cizhen {
  width: 2.4rem;
  height: 3rem;
  position: absolute;
  left: 46%;
  transform-origin: 0 0;
  transform: rotate(-15deg);
  transition: all 1s;
}

.img_cizhen_active {
  width: 2.4rem;
  height: 3rem;
  position: absolute;
  left: 46%;
  transform-origin: 0 0;
  transform: rotate(4deg);
  transition: all 1s;
}

.img_cipan {
  width: 5rem;
  height: 5rem;
  position: absolute;
  bottom: 2.3rem;
  border-radius: 50%;
  z-index: -1;
}

/*歌曲对应的图片的样式*/
.img_gequ {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  bottom: 3.2rem;
  border-radius: 50%;
  /*动画：xuanzhuan 10s一圈 匀速 无限循环*/
  animation: xuanzhuan 10s linear infinite;
}

/*激活状态时，动画播放*/
.img_gequ_active {
  animation-play-state: running;
}

/*失活状态时，动画暂停*/
.img_gequ_paused {
  animation-play-state: paused;
}

/*自定义图片旋转动画*/
@keyframes xuanzhuan {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

// 进度条样式
.range {
  width: 90%;
}
</style>